[Playground] Add Engine user transactions example to playground #7470
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughA new user-facing page was added to the playground web app demonstrating how to handle transactions from user wallets using the thirdweb Engine API, including monitoring and retries. Supporting components and sidebar navigation were introduced, and the thirdweb engine package was added as a local dependency. Additionally, tests for the in-app wallet gateway were refactored for simplified configuration and updated response handling. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant WebApp
participant ThirdwebProvider
participant InAppWallet
participant EngineAPI
participant Blockchain
User->>WebApp: Visit /engine/users page
WebApp->>ThirdwebProvider: Initialize context
User->>InAppWallet: Click ConnectButton
InAppWallet-->>User: Authenticate and provide access token
User->>WebApp: Click Mint NFT button
WebApp->>EngineAPI: Send transaction request (with access token)
EngineAPI->>Blockchain: Queue and submit transaction
EngineAPI-->>WebApp: Return transaction ID
WebApp->>EngineAPI: Poll for transaction status
EngineAPI-->>WebApp: Return status updates (queued, submitted, confirmed, etc.)
WebApp-->>User: Display transaction status and explorer link
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
Playground
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
joaquim-verges
changed the title
joaquim-verges
force-pushed
the
Add_Engine_user_transactions_example_to_playground
branch
from
7ce9abc to
31e5eb4
Compare
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
apps/playground-web/package.json(1 hunks)apps/playground-web/src/app/engine/users/page.tsx(1 hunks)apps/playground-web/src/app/navLinks.ts(1 hunks)apps/playground-web/src/components/account-abstraction/gateway.tsx(1 hunks)packages/thirdweb/src/wallets/in-app/web/lib/in-app-gateway.test.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`**/*.@(ts|tsx)`: Accept a typed 'props' object and export a named function (e.g...
**/*.@(ts|tsx): Accept a typed 'props' object and export a named function (e.g., export function MyComponent()).
Combine class names via 'cn', expose 'className' prop if useful.
Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Local state or effects live inside; data fetching happens in hooks.
Merge class names with 'cn' from '@/lib/utils' to keep conditional logic readable.
Stick to design-tokens: background ('bg-card'), borders ('border-border'), muted text ('text-muted-foreground') etc.
Use the 'container' class with a 'max-w-7xl' cap for page width consistency.
Spacing utilities ('px-', 'py-', 'gap-*') are preferred over custom margins.
Responsive helpers follow mobile-first ('max-sm', 'md', 'lg', 'xl').
Never hard-code colors – always go through Tailwind variables.
Tailwind CSS is the styling system – avoid inline styles or CSS modules.
Prefix files with 'import "server-only";' so they never end up in the client bundle (for server-only code).
📄 Source: CodeRabbit Inference Engine (.cursor/rules/dashboard.mdc)
List of files the instruction was applied to:
apps/playground-web/src/app/navLinks.tsapps/playground-web/src/components/account-abstraction/gateway.tsxapps/playground-web/src/app/engine/users/page.tsxpackages/thirdweb/src/wallets/in-app/web/lib/in-app-gateway.test.ts
`apps/playground-web/*`: The playground-web app is an interactive SDK testing environment.
apps/playground-web/*: The playground-web app is an interactive SDK testing environment.
📄 Source: CodeRabbit Inference Engine (CLAUDE.md)
List of files the instruction was applied to:
apps/playground-web/package.json
🧠 Learnings (5)
📓 Common learnings
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx:33-39
Timestamp: 2025-05-26T16:30:24.965Z
Learning: In the thirdweb dashboard codebase, redirectToContractLandingPage function already handles execution termination internally (likely using Next.js redirect() which throws an exception), so no explicit return statement is needed after calling it.
Learnt from: MananTank
PR: thirdweb-dev/js#7081
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page-impl.tsx:110-118
Timestamp: 2025-05-20T18:54:15.781Z
Learning: In the thirdweb dashboard's token asset creation flow, the `transferBatch` function from `thirdweb/extensions/erc20` accepts the raw quantity values from the form without requiring explicit conversion to wei using `toUnits()`. The function appears to handle this conversion internally or is designed to work with the values in the format they're already provided.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Wallet architecture should unify Wallet and Account interfaces, support in-app wallets (social/email login), smart wallets with account abstraction, and EIP-1193, EIP-5792, EIP-7702 standards.
apps/playground-web/package.json (3)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: De-duplicate dependencies across packages through pnpm workspace hoisting.
Learnt from: MananTank
PR: thirdweb-dev/js#7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Use React Query ('@tanstack/react-query') for all client-side data fetching to leverage caching and query management.
apps/playground-web/src/components/account-abstraction/gateway.tsx (9)
Learnt from: MananTank
PR: thirdweb-dev/js#7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Learnt from: MananTank
PR: thirdweb-dev/js#7434
File: apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx:62-76
Timestamp: 2025-06-24T21:38:03.155Z
Learning: In the project-selector.tsx component for contract imports, the addToProject.mutate() call is intentionally not awaited (fire-and-forget pattern) to allow immediate navigation to the contract page while the import happens in the background. This is a deliberate design choice to prioritize user experience.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: Client components should begin files with 'use client' and use React hooks for interactivity.
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx:33-39
Timestamp: 2025-05-26T16:30:24.965Z
Learning: In the thirdweb dashboard codebase, redirectToContractLandingPage function already handles execution termination internally (likely using Next.js redirect() which throws an exception), so no explicit return statement is needed after calling it.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Client components must begin with 'use client'; before imports to ensure correct rendering behavior in Next.js.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/claim-conditions/shared-claim-conditions-page.tsx:43-49
Timestamp: 2025-05-26T16:31:02.480Z
Learning: In the thirdweb dashboard codebase, when `redirectToContractLandingPage()` is called, an explicit return statement is not required afterward because the function internally calls Next.js's `redirect()` which throws an error to halt execution.
apps/playground-web/src/app/engine/users/page.tsx (6)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: For new UI components, add Storybook stories (*.stories.tsx) alongside the code.
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/shared-page.tsx:41-48
Timestamp: 2025-05-26T16:28:50.772Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractTokensPage` component in the tokens shared page, unlike some other shared pages where it's needed for consistency.
Learnt from: MananTank
PR: thirdweb-dev/js#7434
File: apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx:62-76
Timestamp: 2025-06-24T21:38:03.155Z
Learning: In the project-selector.tsx component for contract imports, the addToProject.mutate() call is intentionally not awaited (fire-and-forget pattern) to allow immediate navigation to the contract page while the import happens in the background. This is a deliberate design choice to prioritize user experience.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/(marketplace)/direct-listings/shared-direct-listings-page.tsx:47-52
Timestamp: 2025-05-26T16:29:54.317Z
Learning: The `projectMeta` prop is not required for the server-rendered `ContractDirectListingsPage` component in the direct listings shared page, following the same pattern as other server components in the codebase where `projectMeta` is only needed for client components.
packages/thirdweb/src/wallets/in-app/web/lib/in-app-gateway.test.ts (1)
Learnt from: jnsdls
PR: thirdweb-dev/js#7364
File: apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx:36-41
Timestamp: 2025-06-18T02:13:34.500Z
Learning: In the logout flow in apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx, when `doLogout()` fails, the cleanup steps (resetAnalytics(), wallet disconnect, router refresh) should NOT execute. This is intentional to maintain consistency - if server-side logout fails, client-side cleanup should not occur.
🧬 Code Graph Analysis (1)
apps/playground-web/src/components/account-abstraction/gateway.tsx (4)
packages/thirdweb/src/exports/chains.ts (1)
baseSepolia(18-18)packages/thirdweb/src/exports/thirdweb.ts (2)
getContract(43-43)encode(149-149)apps/playground-web/src/lib/client.ts (1)
THIRDWEB_CLIENT(20-43)packages/thirdweb/src/exports/utils.ts (1)
stringify(183-183)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/playground-web/package.json (1)
16-16: LGTM!The
@thirdweb-dev/enginedependency is correctly added as a workspace dependency.apps/playground-web/src/app/navLinks.ts (1)
119-123: LGTM!The new navigation link is correctly structured and properly placed within the engine sidebar links.
apps/playground-web/src/components/account-abstraction/gateway.tsx (1)
47-123: Well-implemented transaction status tracking component.The component properly polls for transaction status updates and provides clear visual feedback with appropriate badge variants and block explorer links.
packages/thirdweb/src/wallets/in-app/web/lib/in-app-gateway.test.ts (1)
1-110: Test updates are well-aligned with the engine package migration.The simplified configuration and updated response handling correctly reflect the new API structure.
Comment on lines
189
to
217
| const result = await sendTransaction({ | ||
| body, | ||
| headers: { | ||
| "x-wallet-access-token": iaw.getAuthToken?.(), | ||
| }, | ||
| }); | ||
| if (result.error) { | ||
| throw new Error(`Error sending transaction: ${stringify(result.error)}`); | ||
| } |
There was a problem hiding this comment.
Add validation for auth token and improve error handling.
The auth token might be undefined, and errors are thrown without being caught, which could crash the component.
const handleClick = async () => {
if (!preparedTx || !activeEOA) {
return;
}
+ const authToken = iaw.getAuthToken?.();
+ if (!authToken) {
+ console.error("No auth token available");
+ return;
+ }
+
+ try {
const body = {
executionOptions: {
chainId: baseSepolia.id,
from: activeEOA.address,
type: "auto" as const,
},
params: [preparedTx],
};
const result = await sendTransaction({
body,
headers: {
- "x-wallet-access-token": iaw.getAuthToken?.(),
+ "x-wallet-access-token": authToken,
},
});
if (result.error) {
- throw new Error(`Error sending transaction: ${stringify(result.error)}`);
+ console.error("Error sending transaction:", result.error);
+ return;
}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/playground-web/src/components/account-abstraction/gateway.tsx around
lines 189 to 197, the auth token used in headers may be undefined and errors
from sendTransaction are thrown without catch, risking component crashes. Add a
check to validate that iaw.getAuthToken returns a defined token before calling
sendTransaction, and wrap the sendTransaction call in a try-catch block to
handle errors gracefully, possibly returning or logging the error instead of
throwing it directly.
Comment on lines
199
to
226
| const txId = result.data?.result.transactions[0]?.id; | ||
| if (!txId) { | ||
| throw new Error("No transaction ID"); | ||
| } | ||
|
|
||
| setTxIds((prev) => [...prev, txId]); | ||
| }; |
There was a problem hiding this comment.
Improve error handling for missing transaction ID.
const txId = result.data?.result.transactions[0]?.id;
if (!txId) {
- throw new Error("No transaction ID");
+ console.error("No transaction ID returned from engine");
+ return;
}
setTxIds((prev) => [...prev, txId]);
+ } catch (error) {
+ console.error("Unexpected error sending transaction:", error);
+ }Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/playground-web/src/components/account-abstraction/gateway.tsx around
lines 199 to 205, the error handling for a missing transaction ID is too
generic. Replace the generic error throw with a more descriptive error message
that includes context about the failure. Optionally, consider handling this case
gracefully or logging additional details before throwing to improve debugging
and user feedback.
Comment on lines
34
to
86
| code={`\ | ||
| import { inAppWallet } from "thirdweb/wallets/in-app"; | ||
| import { ConnectButton, useActiveAccount } from "thirdweb/react"; | ||
|
|
||
| const wallet = inAppWallet(); | ||
|
|
||
| function App() { | ||
| const activeWallet = useActiveWallet(); | ||
|
|
||
| const handleClick = async () => { | ||
| const walletAddress = activeWallet?.getAccount()?.address; | ||
| // transactions are a simple POST request to the engine API | ||
| // or use the @thirdweb-dev/engine type-safe JS SDK | ||
| const response = await fetch( | ||
| "https://engine.thirdweb.com/v1/write/contract", | ||
| { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| "x-client-id": "<your-project-client-id>", | ||
| // uses the in-app wallet's auth token to authenticate the request | ||
| "x-wallet-access-token": activeWallet?.getAuthToken?.(), | ||
| }, | ||
| body: JSON.stringify({ | ||
| executionOptions: { | ||
| from: walletAddress, | ||
| chainId: "84532", | ||
| type: "auto", // defaults to sponsored transactions | ||
| }, | ||
| params: [ | ||
| { | ||
| contractAddress: "0x...", | ||
| method: "function claim(address to, uint256 amount)", | ||
| params: [walletAddress, "1"], | ||
| }, | ||
| ], | ||
| }), | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <ConnectButton | ||
| client={client} | ||
| wallet={[wallet]} | ||
| connectButton={{ | ||
| label: "Login to mint!", | ||
| }} | ||
| /> | ||
| <Button | ||
| onClick={handleClick} | ||
| > | ||
| Mint | ||
| </Button> | ||
| </> | ||
| ); | ||
| }`} |
There was a problem hiding this comment.
Fix errors in the code example.
The code example contains several errors that would prevent it from working if users copy it.
code={`\
import { inAppWallet } from "thirdweb/wallets/in-app";
-import { ConnectButton, useActiveAccount } from "thirdweb/react";
+import { ConnectButton, useActiveAccount, useActiveWallet } from "thirdweb/react";
+import { createThirdwebClient } from "thirdweb";
const wallet = inAppWallet();
+const client = createThirdwebClient({ clientId: "<your-project-client-id>" });
function App() {
+ const activeAccount = useActiveAccount();
const activeWallet = useActiveWallet();
const handleClick = async () => {
- const walletAddress = activeWallet?.getAccount()?.address;
+ const walletAddress = activeAccount?.address;
// transactions are a simple POST request to the engine API
// or use the @thirdweb-dev/engine type-safe JS SDK
const response = await fetch(
"https://engine.thirdweb.com/v1/write/contract",
{
method: "POST",
headers: {
"Content-Type": "application/json",
"x-client-id": "<your-project-client-id>",
// uses the in-app wallet's auth token to authenticate the request
- "x-wallet-access-token": activeWallet?.getAuthToken?.(),
+ "x-wallet-access-token": wallet.getAuthToken?.(),
},
body: JSON.stringify({
executionOptions: {
from: walletAddress,
chainId: "84532",
type: "auto", // defaults to sponsored transactions
},
params: [
{
contractAddress: "0x...",
method: "function claim(address to, uint256 amount)",
params: [walletAddress, "1"],
},
],
}),
});
};
return (
<>
<ConnectButton
client={client}
- wallet={[wallet]}
+ wallets={[wallet]}
connectButton={{
label: "Login to mint!",
}}
/>
<Button
onClick={handleClick}
>
Mint
</Button>
</>
);
}`}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| code={`\ | |
| import { inAppWallet } from "thirdweb/wallets/in-app"; | |
| import { ConnectButton, useActiveAccount } from "thirdweb/react"; | |
| const wallet = inAppWallet(); | |
| function App() { | |
| const activeWallet = useActiveWallet(); | |
| const handleClick = async () => { | |
| const walletAddress = activeWallet?.getAccount()?.address; | |
| // transactions are a simple POST request to the engine API | |
| // or use the @thirdweb-dev/engine type-safe JS SDK | |
| const response = await fetch( | |
| "https://engine.thirdweb.com/v1/write/contract", | |
| { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| "x-client-id": "<your-project-client-id>", | |
| // uses the in-app wallet's auth token to authenticate the request | |
| "x-wallet-access-token": activeWallet?.getAuthToken?.(), | |
| }, | |
| body: JSON.stringify({ | |
| executionOptions: { | |
| from: walletAddress, | |
| chainId: "84532", | |
| type: "auto", // defaults to sponsored transactions | |
| }, | |
| params: [ | |
| { | |
| contractAddress: "0x...", | |
| method: "function claim(address to, uint256 amount)", | |
| params: [walletAddress, "1"], | |
| }, | |
| ], | |
| }), | |
| }); | |
| }; | |
| return ( | |
| <> | |
| <ConnectButton | |
| client={client} | |
| wallet={[wallet]} | |
| connectButton={{ | |
| label: "Login to mint!", | |
| }} | |
| /> | |
| <Button | |
| onClick={handleClick} | |
| > | |
| Mint | |
| </Button> | |
| </> | |
| ); | |
| }`} | |
| code={`\ | |
| import { inAppWallet } from "thirdweb/wallets/in-app"; | |
| import { ConnectButton, useActiveAccount, useActiveWallet } from "thirdweb/react"; | |
| import { createThirdwebClient } from "thirdweb"; | |
| const wallet = inAppWallet(); | |
| const client = createThirdwebClient({ clientId: "<your-project-client-id>" }); | |
| function App() { | |
| const activeAccount = useActiveAccount(); | |
| const activeWallet = useActiveWallet(); | |
| const handleClick = async () => { | |
| const walletAddress = activeAccount?.address; | |
| // transactions are a simple POST request to the engine API | |
| // or use the @thirdweb-dev/engine type-safe JS SDK | |
| const response = await fetch( | |
| "https://engine.thirdweb.com/v1/write/contract", | |
| { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| "x-client-id": "<your-project-client-id>", | |
| "x-wallet-access-token": wallet.getAuthToken?.(), | |
| }, | |
| body: JSON.stringify({ | |
| executionOptions: { | |
| from: walletAddress, | |
| chainId: "84532", | |
| type: "auto", // defaults to sponsored transactions | |
| }, | |
| params: [ | |
| { | |
| contractAddress: "0x...", | |
| method: "function claim(address to, uint256 amount)", | |
| params: [walletAddress, "1"], | |
| }, | |
| ], | |
| }), | |
| }); | |
| }; | |
| return ( | |
| <> | |
| <ConnectButton | |
| client={client} | |
| wallets={[wallet]} | |
| connectButton={{ | |
| label: "Login to mint!", | |
| }} | |
| /> | |
| <Button | |
| onClick={handleClick} | |
| > | |
| Mint | |
| </Button> | |
| </> | |
| ); | |
| }`} |
🤖 Prompt for AI Agents
In apps/playground-web/src/app/engine/users/page.tsx between lines 34 and 90,
fix the following errors: replace useActiveWallet with useActiveAccount to
correctly get the active wallet account; change x-wallet-access-token header to
call getAuthToken as a function with parentheses; replace client prop in
ConnectButton with the correct client instance or remove if undefined; change
wallet prop to wallets (plural) and pass an array of wallets; import and use a
proper Button component or replace it with a standard HTML button element;
ensure all variables and imports are correctly defined and used to make the
example functional.
|
This PR has been inactive for 7 days. It is now marked as stale and will be closed in 2 days if no further activity occurs. |
joaquim-verges
force-pushed
the
Add_Engine_user_transactions_example_to_playground
branch
from
31e5eb4 to
884fba3
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/playground-web/src/components/account-abstraction/gateway.tsx (1)
189-226: Add validation for auth token and improve error handling.The auth token retrieval and error handling issues from previous reviews still persist. The auth token might be undefined, and errors are thrown without being caught.
const handleClick = async () => { if (!preparedTx || !activeEOA) { return; } + + const authToken = iaw.getAuthToken?.(); + if (!authToken) { + console.error("No auth token available"); + return; + } + + try { const response = await fetch(`${url}/v1/transactions`, { body: stringify({ chainId: baseSepolia.id, transactions: [ { type: "encoded", ...preparedTx, }, ], }), headers: { - Authorization: `Bearer ${iaw.getAuthToken?.()}`, + Authorization: `Bearer ${authToken}`, "Content-type": "application/json", "x-client-id": THIRDWEB_CLIENT.clientId, }, method: "POST", }); if (!response.ok) { const text = await response.text(); - throw new Error( - `Failed to send transaction: ${response.statusText} - ${text}`, - ); + console.error("Failed to send transaction:", response.statusText, text); + return; } const results = await response.json(); const txId = results.result?.transactionIds?.[0]; if (!txId) { - throw new Error("No transaction ID"); + console.error("No transaction ID returned from engine"); + return; } setTxIds((prev) => [...prev, txId]); + } catch (error) { + console.error("Unexpected error sending transaction:", error); + } };
🧹 Nitpick comments (1)
apps/playground-web/src/components/account-abstraction/gateway.tsx (1)
69-69: Consider reducing polling frequency to improve performance.The 2-second polling interval might be too aggressive for transaction status updates, potentially causing unnecessary load on the API.
- refetchInterval: 2000, + refetchInterval: 5000, // Poll every 5 seconds instead of 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/playground-web/package.json(1 hunks)apps/playground-web/src/app/engine/users/page.tsx(1 hunks)apps/playground-web/src/app/navLinks.ts(1 hunks)apps/playground-web/src/components/account-abstraction/gateway.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- apps/playground-web/src/app/navLinks.ts
- apps/playground-web/package.json
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/playground-web/src/app/engine/users/page.tsx
🧰 Additional context used
📓 Path-based instructions (2)
`**/*.{ts,tsx}`: Write idiomatic TypeScript with explicit function declarations ...
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
📄 Source: CodeRabbit Inference Engine (CLAUDE.md)
List of files the instruction was applied to:
apps/playground-web/src/components/account-abstraction/gateway.tsx
`apps/{dashboard,playground-web}/**/*.{tsx,ts}`: Import UI primitives from `@/co...
apps/{dashboard,playground-web}/**/*.{tsx,ts}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class merging
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
ExposeclassNameprop on root element for overrides in UI components
Server Components (Node edge): Start files withimport "server-only";
Server Components: Read cookies/headers withnext/headers
Server Components: Access server-only environment variables
Server Components: Perform heavy data fetching
Server Components: Implement redirect logic withredirect()fromnext/navigation
Client Components (browser): Begin files with'use client';
Client Components: Handle interactive UI with React hooks (useState,useEffect, React Query, wallet hooks)
Client Components: Access browser APIs (localStorage,window,IntersectionObserver)
Client Components: Support fast transitions with prefetched data
Server Side Data Fetching: Always callgetAuthToken()to retrieve JWT from cookies
Server Side Data Fetching: UseAuthorization: Bearerheader – never embed tokens in URLs
Server Side Data Fetching: Return typed results (Project[],User[]) – avoidany
Client Side Data Fetching: Wrap calls in React Query (@tanstack/react-query)
Client Side Data Fetching: Use descriptive, stablequeryKeysfor cache hits
Client Side Data Fetching: ConfigurestaleTime/cacheTimebased on freshness (default ≥ 60s)
Client Side Data Fetching: Keep tokens secret via internal API routes or server actions
Analytics Events: Never importposthog-jsin server components
📄 Source: CodeRabbit Inference Engine (CLAUDE.md)
List of files the instruction was applied to:
apps/playground-web/src/components/account-abstraction/gateway.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Support fast transitions with prefetched data
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx:33-39
Timestamp: 2025-05-26T16:30:24.965Z
Learning: In the thirdweb dashboard codebase, redirectToContractLandingPage function already handles execution termination internally (likely using Next.js redirect() which throws an exception), so no explicit return statement is needed after calling it.
Learnt from: MananTank
PR: thirdweb-dev/js#7081
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page-impl.tsx:110-118
Timestamp: 2025-05-20T18:54:15.781Z
Learning: In the thirdweb dashboard's token asset creation flow, the `transferBatch` function from `thirdweb/extensions/erc20` accepts the raw quantity values from the form without requiring explicit conversion to wei using `toUnits()`. The function appears to handle this conversion internally or is designed to work with the values in the format they're already provided.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Access browser APIs (`localStorage`, `window`, `IntersectionObserver`)
apps/playground-web/src/components/account-abstraction/gateway.tsx (22)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Support fast transitions with prefetched data
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Anything that consumes hooks from `@tanstack/react-query` or thirdweb SDKs.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/extensions/**/*.{ts,tsx} : Auto-generated contracts from ABI definitions in extensions
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/api/**/*.{ts,tsx} : Always call `getAuthToken()` to get the JWT from cookies.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Side Data Fetching: Use `Authorization: Bearer` header – never embed tokens in URLs
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Side Data Fetching: Always call `getAuthToken()` to retrieve JWT from cookies
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Side Data Fetching: Keep tokens secret via internal API routes or server actions
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/api/**/*.{ts,tsx} : Pass the token in the `Authorization: Bearer` header – never embed it in the URL.
Learnt from: jnsdls
PR: thirdweb-dev/js#7364
File: apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx:36-41
Timestamp: 2025-06-18T02:13:34.500Z
Learning: In the logout flow in apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx, when `doLogout()` fails, the cleanup steps (resetAnalytics(), wallet disconnect, router refresh) should NOT execute. This is intentional to maintain consistency - if server-side logout fails, client-side cleanup should not occur.
Learnt from: MananTank
PR: thirdweb-dev/js#7315
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226
Timestamp: 2025-06-10T00:50:20.795Z
Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/pages/*.client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Server Components: Perform heavy data fetching
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Side Data Fetching: Wrap calls in React Query (`@tanstack/react-query`)
Learnt from: MananTank
PR: thirdweb-dev/js#7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/shared-analytics-page.tsx:33-39
Timestamp: 2025-05-26T16:30:24.965Z
Learning: In the thirdweb dashboard codebase, redirectToContractLandingPage function already handles execution termination internally (likely using Next.js redirect() which throws an exception), so no explicit return statement is needed after calling it.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "@3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
apps/playground-web/src/components/account-abstraction/gateway.tsx (2)
1-1: Component structure follows thirdweb patterns correctly.The component properly implements the "use client" directive and follows React Query patterns for data fetching. The wallet validation logic ensures proper in-app wallet usage.
Also applies to: 137-137
126-130: Improve type safety for transaction status handling.The code assumes
txStatus.executionResultexists without proper type checking, which could lead to runtime errors.<TableCell> - {isLoading || !txStatus.executionResult?.status ? ( + {isLoading || !txStatus?.executionResult?.status ? ( <Badge variant="warning">Queued</Badge> ) : ( getStatusBadge(txStatus.executionResult.status) )} </TableCell>⛔ Skipped due to learnings
Learnt from: MananTank PR: thirdweb-dev/js#7315 File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx:153-226 Timestamp: 2025-06-10T00:50:20.795Z Learning: In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/launch-nft.tsx, the updateStatus function correctly expects a complete MultiStepState["status"] object. For pending states, { type: "pending" } is the entire status object. For error states, { type: "error", message: React.ReactNode } is the entire status object. The current code incorrectly spreads the entire step object instead of passing just the status object.Learnt from: CR PR: thirdweb-dev/js#0 File: .cursor/rules/dashboard.mdc:0-0 Timestamp: 2025-06-30T10:26:04.389Z Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).Learnt from: MananTank PR: thirdweb-dev/js#7177 File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenPriceData.ts:49-49 Timestamp: 2025-05-27T19:55:25.056Z Learning: In the ERC20 public pages token price data hook (`useTokenPriceData.ts`), direct array access on `json.data[0]` without optional chaining is intentionally correct and should not be changed to use safety checks.Learnt from: CR PR: thirdweb-dev/js#0 File: CLAUDE.md:0-0 Timestamp: 2025-06-30T10:25:29.489Z Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)
| }); | ||
| const { data: ownedNfts } = useReadContract(getOwnedNFTs, { | ||
| // biome-ignore lint/style/noNonNullAssertion: handled by queryOptions | ||
| address: activeEOA?.address!, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid using non-null assertion operator.
The non-null assertion bypasses TypeScript's safety checks. The queryOptions.enabled condition already handles the null case.
- // biome-ignore lint/style/noNonNullAssertion: handled by queryOptions
- address: activeEOA?.address!,
+ address: activeEOA?.address,🤖 Prompt for AI Agents
In apps/playground-web/src/components/account-abstraction/gateway.tsx at line
148, remove the non-null assertion operator (!) from activeEOA?.address since
queryOptions.enabled already ensures activeEOA is not null. This avoids
bypassing TypeScript's safety checks and relies on the existing condition to
guarantee the value is defined.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR-Codex overview
This PR introduces new features related to user transactions in the
thirdwebplatform. It enhances the functionality of the in-app wallet, allowing users to mint NFTs and manage transactions effectively.Detailed summary
navLinks.ts.page.tsx, including metadata and layout.UserTransactionscomponent to handle transaction logic.GatewayPreviewcomponent for transaction management and NFT minting.in-app-gateway.test.tsfor testing the new features.package.jsonandpnpm-lock.yaml.Summary by CodeRabbit
New Features
Chores
Tests